<template>
  <div>
    <vTablePage
      :pageConfig="pageConfig"
      :tableData="tableData"
      :total="total"
      @changeEdit="changeEditType"
      @changePageNo="changePageNo"
    >
      <template #header>
        <!-- 三级分类组件 -->
        <div style="width: 100%;">
          <category :scene="scene" />
        </div>
      </template>
      <template #tableHeader>
        <!-- 添加SPU -->
        <div style="margin-bottom: 5px;">
          <el-button
            type="primary"
            size="default"
            icon="Plus"
            :disabled="tableData.length === 0"
            @click="addSpu"
          >
            添加SPU
          </el-button>
        </div>
      </template>
    </vTablePage>
    <!-- dialog对话框:展示已有的SKU数据 -->
    <el-dialog v-model="show" title="SKU列表">
      <el-table border :data="skuArr">
          <el-table-column label="SKU名字" prop="skuName"></el-table-column>
          <el-table-column label="SKU价格" prop="price"></el-table-column>
          <el-table-column label="SKU重量" prop="weight"></el-table-column>
          <el-table-column label="SKU图片">
              <template #="{ row, $index }">
                  <img :src="row.skuDefaultImg" style="width: 100px;height: 100px;">
              </template>
          </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 添加SPU|修改SPU组件 -->
    <el-dialog v-model="showSpu" :title="scene === 1 ? '添加SPU' : '修改SPU'"
       :append-to-body="true"
    >
      <SpuForm ref="spu" :scene="scene" @changeSuccess="changeSuccess" />
      <template #footer>
        <el-button type="primary" size="default" @click="closeDialog">取消</el-button>
        <el-button type="primary" size="default" @click="saveSpu">保存</el-button>
      </template>
    </el-dialog>
    <!-- 添加SKU组件 -->
    <el-dialog v-model="showSku"  :append-to-body="true"
      title="添加SKU" width="70%">
      <SkuForm ref="sku" :scene="scene" @changeSuccess="changeSuccess" />
      <template #footer>
        <el-button type="primary" size="default" @click="closeDialog">取消</el-button>
        <el-button type="primary" size="default" @click="saveSku">保存</el-button>
      </template>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog
      v-model="delDialogVisible"
      title="删除"
      width="500"
    >
      <span>确定删除这条数据吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="delDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="closeDelete">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, watch, onBeforeUnmount } from 'vue'
import vTablePage from '../../components/tablePage/index.vue'
import category from '../../components/category/index.vue'
import SpuForm from './components/spuForm.vue';
import SkuForm from './components/skuForm.vue';

import type { HasSpuResponseData, Records, SkuInfoData, SkuData } from '@/api/product/spu/type'
import { reqHasSpu, reqSkuList, reqRemoveSpu } from '@/api/product/spu';
import useCategoryStore from '@/store/modules/category';
let categoryStore = useCategoryStore();

// 表格配置
const pageConfig = reactive({
  // 是否展示头部
  showHeader: true,
  // 是否展示索引or多选
  showIndex: true,
  showSelection: false,
  // 列表
  columns:[
    {
      label: 'SPU名称',
      prop: 'spuName'
    },
    {
      label: 'SPU描述',
      prop: 'description'
    },
    {
      label: 'SPU操作',
      prop: 'operation',
      isEdit: true,
      isFixed: true
    }
  ],
  // 操作列
  editBtns:[
    {
      text: '查看SKU',
      type: 'primary',
      icon: 'View'
    },
    {
      text: '添加SKU',
      type: 'add',
      icon: 'Plus'
    },
    {
      text: '编辑SPU',
      type: 'edit',
      icon: 'Edit'
    },
    {
      text: '删除',
      type: 'delete',
      icon: 'Delete'
    }
  ]
})
const tableData = ref([])
const total = ref<number>(0)
const pageNo = ref<number>(1)
//获取子组件实例SpuForm
let spu = ref<any>();
//获取子组件实例SkuForm
let sku = ref<any>();

//存储全部的SKU数据
let skuArr = ref<SkuData[]>([]);
let show = ref<boolean>(false);
//场景的数据
let scene = ref<number>(0); //0:显示已有SPU  1:添加或者修改已有SPU 2:添加SKU的结构
// 弹框
const showSpu = ref<boolean>(false);
const showSku = ref<boolean>(false);
const delDialogVisible = ref(false);
//监听三级分类ID变化
watch(() => categoryStore.c3Id, () => {
    //当三级分类发生变化的时候清空对应的数据
    tableData.value = [];
    //务必保证有三级分类ID
    if (!categoryStore.c3Id) return;
    getHasSpu();
});
//此方法执行:可以获取某一个三级分类下全部的已有的SPU
const getHasSpu = async (pager = 1) => {
    //修改当前页码
    pageNo.value = pager;
    let result: HasSpuResponseData = await reqHasSpu(pageNo.value, categoryStore.c3Id);
    if (result.code == 200) {
      tableData.value = result.data.records;
        total.value = result.data.total;
    }
}
// 编辑类型
const changeEditType = (val: any) => {
  const { item, row } = val
  if (item.type === 'primary') {
    changeRole(row)
  } else if (item.type === 'edit') {
    changeEdit(row)
  } else if (item.type === 'delete') {
    changeDelete(row)
  } else if (item.type === 'add') {
    changeAddSku(row)
  }
}

// 分页
const changePageNo = (row: any) => {
  pageNo.value = row
  // getList(pageNo.value)
}
//添加新的SPU按钮的回调
const addSpu = () => {
  scene.value = 1;
  showSpu.value = true;
  //点击添加SPU按钮,调用子组件的方法初始化数据
  nextTick(() => {
    spu.value.initAddSpu(categoryStore.c3Id);
  })
}
// 添加SKU
const changeAddSku = async (row: any) => {
  showSku.value = true;
  //调用子组件的方法初始化添加SKU的数据
  nextTick(() => {
    sku.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row);
  })
}
// 详情
const changeRole = async(row: any) => {
  let result: SkuInfoData = await reqSkuList((row.id as number));
  if (result.code == 200) {
      skuArr.value = result.data;
      //对话框显示出来
      show.value = true;
  }
}
// 编辑SPU
const changeEdit = (row: any) => {
  scene.value = 2;
  showSpu.value = true;
  //调用子组件实例方法获取完整已有的SPU的数据
  nextTick(() => {
    spu.value.initHasSpuData(row);
  })
}
// 删除
const id = ref<number>(0);
const changeDelete =  (row: any) => {
  id.value = row.id;
  delDialogVisible.value = true;
}
const closeDelete = async() => {
  let result = await reqRemoveSpu(id.value);
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    delDialogVisible.value = false;
    getHasSpu();
  }

}
// 保存spu
const saveSpu = () => {
  spu.value.save();
}
// 保存sku
const saveSku = () => {
  sku.value.save();
}
// 触发子函数
const changeSuccess = () => {
  closeDialog();
  getHasSpu();
}
// 关闭对话框
const closeDialog = () => {
  showSpu.value = false;
  showSku.value = false;
}
//路由组件销毁前，情况仓库关于分类的数据
onBeforeUnmount(() => {
    categoryStore.$reset();
})

</script>

<style scoped lang="scss">

</style>